import { Badge, TabBar } from 'antd-mobile'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
  } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
const Tabbar=()=>{
    const tabs = [
        {
          key: '/',
          title: '首页',
          icon: <AppOutline />,
          badge: Badge.dot,
        },
        {
          key: '/list',
          title: '待办',
          icon: <UnorderedListOutline />,
          badge: '5',
        },
        {
          key: '/chat',
          title: '消息',
          icon: (active) =>
            active ? <MessageFill /> : <MessageOutline />,
          badge: '99+',
        },
        {
          key: '/my',
          title: '我的',
          icon: <UserOutline />,
        },
      ]
      const nav= useNavigate()
    return (
        <div style={{position:'absolute',bottom:'0',width:'100%'}}>
             <TabBar onChange={(key)=>nav(key)}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
        </div>
    )
}
export default Tabbar